<!--
 * @Descripttion: 
 * @Author: Zhai Penghui
 * @Date: 2021-11-03 15:21:43
-->
<template>
  <div class="login-container">
    <a-form
      ref="formRef"
      class="login-form"
      :model="loginForm"
      @submit.prevent="handleSubmit"
    >
      <div class="title-container">
        <h3 class="title">Login Form</h3>
      </div>
      <a-form-item has-feedback>
        <a-input v-model:value="loginForm.username" placeholder="Username">
          <template #prefix
            ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input>
      </a-form-item>
      <a-form-item has-feedback>
        <a-input
          v-model:value="loginForm.password"
          type="password"
          placeholder="Password"
        >
          <template #prefix
            ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          size="large"
          html-type="submit"
          block
          type="primary"
          :loading="loading"
        >
          登录
        </a-button>
      </a-form-item>
      <div style="position: relative">
        <div class="tips">
          <span>Username : admin</span>
          <span>Password : any</span>
        </div>
        <div class="tips">
          <span style="margin-right: 18px">Username : editor</span>
          <span>Password : any</span>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from 'vue-router'
export default {
  name: "",
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    const formState = reactive({
      loginForm: {
        username: "admin",
        password: "111111",
      },
      loading: false,
    });
     const store = useStore()
    const router = useRouter()
    const route = useRoute()

    const handleSubmit = async () => {
      const { username, password } = formState.loginForm;
      if (username.trim() == "" || password.trim() == "") {
        return message.warning("用户名或密码不能为空！");
      }
      message.loading("登录中...", 0);
      formState.loading = true;

      const params = {
        username,
        password,
      };
  

      const {code} = await store.dispatch("user/login", params).finally(() => {
        formState.loading = false
        message.destroy()
      });
    

      if (code == 0) {
        const toPath = decodeURIComponent((route.query?.redirect || '/'))

        message.success('登录成功！')
        router.replace(toPath).then(() => {
          if (route.name == 'login') {
            router.replace('/')
          }
        })
      } else {
        message.info('登录失败')
      }
    };

    return {
      ...toRefs(formState),
      handleSubmit,
    };
  },
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .ant-form-item-control {
    display: inline-block;
    // height: 47px;
    width: 85%;

    input {
      border: 0px;
      border-radius: 0px;
      padding: 4px 5px 4px 15px;
      color: #606266;
      font-size: 15px;
    }
  }

  .ant-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    // background-color: #fff;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
}
</style>
